<template>
    <view class="hint">
        
        <view class="opinion">
            <view class="headline">
                <p>您的意见</p>&nbsp;<span>*</span>
            </view>
            <span>{{ currentLength }}/{{ maxLength }}</span>
        </view>
        
        <textarea v-model="feedbackText" placeholder="请输入您要反馈的内容(10-200字以内)"></textarea>
        
        <view class="remind" v-if="showWarning">{{ warningMessage }}</view>
        
        <view class="opinion">
            <view class="headline">
                <p>联系方式</p>&nbsp;<span>*</span>
            </view>
        </view>
        
        <input type="text" v-model="contactInfo" placeholder="请输入手机号，方便我们及时回复">
        
        <view @click="submitFeedback" class="submit">提交</view>
        
    </view>
</template>

<script setup>
    import { ref, watch } from 'vue';
    import { feedback } from '@/api/list.js'
    
    
    const feedbackText = ref('');// 反馈内容绑定的变量
    const contactInfo = ref('');// 联系方式绑定变量
    const maxLength = 200; // 最大字数限制
    const currentLength = ref(0); // 实时计算反馈内容的现有字数
    const showWarning = ref(false); // 是否显示警告信息
    const warningMessage = ref(''); // 警告信息内容
    
    // 简单的手机号格式校验函数（只是示例，可完善更严谨的验证规则）
    function isMobileValid(mobile) {
        const reg = /^1[3-9]\d{9}$/;
        return reg.test(mobile);
    }
    
    // 当反馈内容变化时更新现有字数及检查字数限制
    watch(feedbackText, (newValue) => {
        currentLength.value = newValue.length;
        let hasError = false;
        if (currentLength.value < 10) {
            showWarning.value = true;
            warningMessage.value = '字数过少，请至少输入 10 个字';
            hasError = true;
        } else if (currentLength.value > maxLength) {
            showWarning.value = true;
            warningMessage.value = '字数超出限制，最多 200 字';
            hasError = true;
        } else {
            showWarning.value = false;
        }
    });
    
    // 提交反馈函数
    const submitFeedback = async () => {
        let hasError = false;
        const trimmedFeedbackText = feedbackText.value.trim();
        if (currentLength.value < 10 || currentLength.value > maxLength) {
            showWarning.value = true;
            warningMessage.value = currentLength.value < 10? '字数过少，请至少输入 10 个字' : '字数超出限制，最多 200 字';
            hasError = true;
        }
        if (contactInfo.value === '') {
            showWarning.value = true;
            warningMessage.value = '请填写联系方式';
            hasError = true;
        }
        if (!isMobileValid(contactInfo.value)) {
            showWarning.value = true;
            warningMessage.value = '请输入正确的手机号格式';
            hasError = true;
        }
        if (hasError) {
            return;
        }
        showWarning.value = false;

        try {
            const res = await feedback({
                content: trimmedFeedbackText,
                mobile: contactInfo.value,
            });
            console.log('反馈内容：', trimmedFeedbackText);
            console.log('联系方式：', contactInfo.value);
            console.log('接口返回的完整数据：', res);
            if (res.code) {
				uni.showToast({
				    title: '反馈提交成功！',
				    icon: 'success',
				    duration: 1000,
				    backgroundColor: '#333'
				});
				setTimeout(() => {
				    uni.navigateBack({
				        delta: 1,
				        animationType: 'pop-out',
				        animationDuration: 1000,
				    });
				}, 800); // 这里设置了延迟的时间
                console.log('反馈已成功提交到服务器');
            } else {
                showWarning.value = true;
                warningMessage.value = '反馈提交失败，请稍后重试';
                console.log('反馈提交失败：', res.msg);
            }
        } catch (error) {
            showWarning.value = true;
            warningMessage.value = '反馈提交过程中出现错误，请稍后重试';
            console.error('反馈提交过程中出现错误：', error);
        }
    };

</script>

<style lang="scss" scoped>

.hint{
    position: relative;
}

.remind{
  width: 80%;
  font-size: 15px;
  margin: 0 auto;
  margin-top: 10px;
  color: #ff0000;
  position: absolute;
  left: 30px;
  animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  animation-iteration-count: 1;
}

.opinion{
    width: 85%;
    height: 80px;
    margin: 0 auto;
    padding-top: 20px;
    display: flex;
    align-items: center;
    // background-color: #ffaaff;
}

.opinion span{
    margin-left: auto;
    font-size: 15px;
}

.headline span{
    color: #ff0000;
}

.headline p{
    display: inline;
    font-weight: 600;
}

textarea {
  width: 80%;
  height: 150px;
  margin: 0 auto;
  background-color: #f4f7f9;
  border-radius: 15px;
  padding: 20px;
}

input{
    width: 80%;
    height: 20px;
    margin: 0 auto;
    background-color: #f4f7f9;
    border-radius: 15px;
    padding: 20px;
}

.submit{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-size: 20px;
    width: 80%;
    height: 50px;
    margin: 0 auto;
    margin-top: 40px;
    background-color: #F4F7F9;
    border-radius: 50px;
    background: linear-gradient(to right, #3AACFF, #635CFF);
}

</style>